<template>
  <div class="order">
    <div class="header">
      <div @click="goBack">
        <img src="../../../static/img/arrow_left@3x.png" alt="">
      </div>
      <h1>订单详情</h1>
    </div>
    <div class="undone">
      <p class="title-text">{{this.undone}}</p>
      <div class="item" v-for="item in number" :key="item.id">
        <router-link :to="{ path: '/index', query: {orderNum:item.orderNum}}" class="item">
        <div class="title">
          <p class="left">快车-拼单</p>
          <div class="icon">
            <img src="../../../static/img/right.png" alt="">
          </div>
          <!--<p class="right">{{item.payStatus}}</p>-->
        </div>
        <div class="time-box">
          <div class="icon">
            <img src="../../../static/img/icon_shizhong@3x.png" alt="">
          </div>
          <p class="left">{{item.createTime|datafmt('YYYY-MM-DD HH:MM:SS')}}</p>
          <!-- <p class="left">{{item.time}}</p> -->
        </div>
        <div class="test-box">
            <div class="icon">
              <img src="../../../static/img/dot_lv@3x.png">
            </div>
            <div class="left">{{item.startAddress}}</div>
        </div>
        <div class="test-box">
            <div class="icon">
              <img src="../../../static/img/dot_hong@3x.png">
            </div>
            <div class="left">{{item.desAddress}}</div>
        </div>
        </router-link>
      </div>
    </div>
    <div class="done">
      <p class="title-text">{{this.done}}</p>
      <div class="item" v-for="item in unumber" :key="item.id">
        <div class="title">
          <p class="left">{{item.name}}</p>
          <div class="icon">
            <img src="../../../static/img/right.png" alt="">
          </div>
          <p class="right">{{item.payStatus}}</p>
        </div>
        <div class="time-box">
          <div class="icon">
            <img src="../../../static/img/icon_shizhong@3x.png" alt="">
          </div>
          <p class="left">{{item.createTime|datafmt('YYYY-MM-DD HH:MM:SS')}}</p>
          <!-- <p class="left">{{item.time}}</p> -->
        </div>
        <div class="test-box">
            <div class="icon">
              <img src="../../../static/img/dot_lv@3x.png">
            </div>
            <div class="left">{{item.startAddress}}</div>
          </div>
          <div class="test-box">
            <div class="icon">
              <img src="../../../static/img/dot_hong@3x.png">
            </div>
            <div class="left">{{item.desAddress}}</div>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
 // 引入这个页面需要的方法库
  // import {mapGetters} from 'vuex'
  import {userCarList} from 'api/api'
  import axios from 'axios'
  import { mapGetters, mapMutations } from 'vuex'

  export default {
    data () {
      return {
        undone: '未完成订单:',
        done: '已完成订单:',
        page: 1,
        number: [],
        unumber: [
          // {'name': '快车-拼单', 'state': '已支付', 'day': '今天', 'time': '8: 00', 'startPlace': '武汉', 'endPlace': '汉口'}
        ]
      }
    },
    mounted () {
      this.init()
    },
    // 获取用户当前已经支付和未支付的订单列表
    created () {
      let psId = localStorage.getItem('userId')
      let noListAddress = userCarList + '/' + psId + '/' + this.page + '/' + 10 + '/' + 2 + '/getJsjOrderList'
      axios.get(noListAddress).then((res) => {
        for (let i = 0; i < res.data.result.length; i++) {
          if (res.data.result[i].orderStatus === 1) {
            res.data.result[i].payStatus = '订单已取消'
          }
          if (res.data.result[i].payStatus === 1) {
            res.data.result[i].payStatus = '待支付'
          } else if (res.data.result[i].payStatus === 2) {
            res.data.result[i].payStatus = '已支付'
          } else if (res.data.result[i].payStatus === 3) {
            res.data.result[i].payStatus = '订单已超时'
          }
        }
        this.number = res.data.result
        console.log(this.number)
      }).catch((err) => {
        console.log(err)
      })
      let alListAddress = userCarList + '/' + psId + '/' + this.page + '/' + 10 + '/' + 3 + '/getJsjOrderList'
      axios.get(alListAddress).then((res) => {
        console.log(res)
        for (let i = 0; i < res.data.result.length; i++) {
          if (res.data.result[i].orderStatus === 1) {
            res.data.result[i].payStatus = '订单已取消'
          }
          if (res.data.result[i].payStatus === 1) {
            res.data.result[i].payStatus = '待支付'
          } else if (res.data.result[i].payStatus === 2) {
            res.data.result[i].payStatus = '已支付'
          } else if (res.data.result[i].payStatus === 3) {
            res.data.result[i].payStatus = '订单已超时'
          }
        }
        this.unumber = res.data.result
      }).catch((err) => {
        console.log(err)
      })
    },
    methods: {
      goBack () {
        // this.$router.go(-1)
        this.setShowTips(false)
        this.setShowCarpool(false)
        this.setShowInType(false)
        this.setShowCancel(false)
        this.setShowType(true)
        this.$router.push('/index')
      },
      init () {
        if (localStorage.getItem('token') === null) {
          this.$router.push('/login')
        }
      },
      ...mapMutations({
        setSearchBoxInfo: 'SET_SEARCHBOXINFO',
        setShowSearchBox: 'SET_SHOWSEARCHBOX',
        setShowEnd: 'SET_SHOWEND',
        setDestination: 'SET_DESTINATION',
        setEstimatePrice: 'SET_ESTIMATEPRICE',
        setShowCarpool: 'SET_SHOWCARPOOL',
        setShowType: 'SET_SHOWTYPE',
        setShowInType: 'SET_SHOWINTYPE',
        setCarStartTime: 'SET_CARSTARTTIME',
        setStartCoor: 'SET_STARTCOOR',
        setEndCoor: 'SET_ENDCOOR',
        setShowState: 'SET_SHOWSTATE',
        setShowArrival: 'SET_SHOWARRIVAL',
        setShowTips: 'SET_SHOWTIPS',
        setShowCancel: 'SET_SHOWCANCEL'
      })
    },
    computed: {
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .order
    width: 100%
    height: auto
    min-height: 100vh
    background-color: #f4f4f4
    .header
      width 100%
      height 50px
      background-color #fff
      h1
       width 100%
       height 50px
       line-height 50px
       font-size 18px
      div
        width 14px
        height 16px
        float left
        margin-top 10px
        margin-left 20px
        img 
          width 100%
    .title-text
      text-align: left
      font-size: 18px
      line-height: 40px
    .undone,.done
      width: 335px
      height: auto
      margin: 0 auto
    .item
      position: relative
      width: 100%
      height: 120px
      padding-top 5px
      padding-left 5px
      margin-bottom: 10px
      background-color #fff
      .title
        width: 100%
        height: 12px
        margin-top: 10px
        .left
          float: left
          font-size: 16px
          color: #333
        .right
          position: absolute
          right: 25px
          font-size: 16px
          color: rgb(153, 153, 153)
        .icon
          float: right
          margin-right: 10px
          width: 10px
          height: 10px
          img 
            width 100%
      .time-box
        width: 100%
        height:12px
        margin-top: 10px
        .icon
          float: left
          width: 12px
          height: 12px
          margin 0
          margin-right 6px
          img 
            width 100%
        .left
          float: left
          margin-left: 5px
          font-size: 12px
          color: rgb(153, 153, 153)
          &:last-child
            margin-left: 2px
      .test-box
        width: 100%
        height:12px
        margin-top: 10px
        .icon
          float: left
          width: 10px
          height: 10px
          margin 0
          margin-right 10px
          img 
            width 100%
        .left
          float: left
          margin-left: 5px
          font-size: 12px
          color: rgb(153, 153, 153)
          &:last-child
            margin-left: 2px 
</style>